<div class="useradmin-index">
    <!-- 关闭Tab时顶部标题 -->
    <div class="layui-body-header">
        <span class="layui-body-header-title">资源分类列表</span>
        <span class="layui-breadcrumb pull-right">
            <a href="/home">首页</a>
            <a><cite>资源分类列表</cite></a>
        </span>
    </div>

    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" for="title">标题</label>
                            <div class="layui-input-inline">
                                <input type="text" id="title" class="layui-input" name="title"/>
                            </div>
                        </div>

                        {{.BuildIn.DropDownList "status|状态|0|请选择状态|1" (.BuildIn.StatusStr 0 1) 0}}

                        <div class="layui-inline">&emsp;
                            <button class="layui-btn layui-btn-sm icon-btn" id="btnSearch" lay-submit
                                    lay-filter="LAY-attachment-cate-search">
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                    </div>
                </div>
                <table class="layui-table" id="attachment-cate-table" lay-filter="attachment-cate-table"></table>
            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="attachment-cate-table-bar">
    <!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="details">查看</a>-->
    <a class="layui-btn layui-btn-normal layui-btn-xs" perm-show="attachment-cate:update" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" perm-show="attachment-cate:delete" lay-event="del">删除</a>
</script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'treeTable', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var util = layui.util;
        var treeTable = layui.treeTable;


        // 渲染表格
        var insTb = treeTable.render({
            elem: '#attachment-cate-table',
            url: '/admin/attachment-cate/list',
            method: 'get',
            toolbar: ['<p>',
                '<button lay-event="add" perm-show="attachment-cate:create" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '</p>'].join(''),
            defaultToolbar: [],
            // limit: 20,
            where: {'init_data': 'get-request'}, //用于判断是否为get的请求
            // page: true,
            cellMinWidth: 100,
            // height: "600px",
            tree: {
                iconIndex: 2,
                idName: 'id',
                pidName: 'pid',
                isPidData: true,
                openName: 'open'
            },
            parseData: function (res) {
                let _data = res.data;
                if (_data) {
                    _data.map(ret => {
                        ret.open = true;
                    })
                } else {
                    _data = [];
                }
                res.data = _data;
                return res;
            },
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', align: 'center', title: '编号', sort: true},
                    {field: 'title', align: 'center', title: '标题', width: "18%"},
                    {
                        field: 'status', align: 'center', title: '状态', templet: function (d) {
                            return d.status == 0 ? '禁用' : '启用';
                        }
                    },
                    {field: 'sort', align: 'center', title: '排序'},
                    {field: 'createdAt', align: 'center', title: '创建时间', width: "16%", sort: true},
                    {field: 'updatedAt', align: 'center', title: '更新时间', width: "16%", sort: true},
                    {fixed: 'right', align: 'center', toolbar: '#attachment-cate-table-bar', title: '操作', minWidth: 180}
                ]
            ],
        });

        insTb.expandAll();


        //监听搜索
        form.on('submit(LAY-attachment-cate-search)', function (data) {
            var field = data.field;
            //执行重载
            treeTable.reload('attachment-cate-table', {
                where: field
            });
            return false;
        });

        /* 表格头工具栏点击事件 */
        treeTable.on('toolbar(attachment-cate-table)', function (obj) {
            if (obj.event === 'add') { // 添加
                showEditModel();
            }
        });

        //监听工具条
        treeTable.on('tool(attachment-cate-table)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'edit') { //修改
                showEditModel(data)
            } else if (layEvent === 'del') { //删除
                delModel(data, obj);
            } else if (layEvent === 'details') {
                viewModel(data);
            }
        });

        /**
         * 删除数据
         * @param table_data
         * @param obj
         */
        function delModel(table_data, obj) {
            layer.confirm('真的要删除该记录吗？', function (index) {
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
                //向服务端发送删除指令
                const url = "/admin/attachment-cate/delete/" + table_data.id;
                admin.req(url, {}, function (data) {
                    if (data.code === 0) {
                        layer.msg("删除成功！", {icon: 1}, function () {
                            treeTable.reload('attachment-cate-table');
                        });
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                }, 'post');
            });
        }

        //修改and添加
        function showEditModel(data) {
            admin.putTempData('t-attachment-cate-form-ok', false);
            admin.open({
                type: 2,
                title: data ? '修改分类' : '添加分类',
                maxmin: true,
                resize: true,
                area: ['60%', '70%'],
                content: data ? '/admin/attachment-cate/update/' + data.id : '/admin/attachment-cate/create',
                end: function () {
                    admin.getTempData('t-attachment-cate-form-ok') && treeTable.reload('attachment-cate-table');  // 成功刷新表格
                }
            });
        }

        /**
         * 查看数据
         * @param data
         */
        function viewModel(data) {
            admin.open({
                type: 2,
                title: '查看',
                content: '/admin/attachment-cate/view/' + data.id,
                maxmin: true,
                resize: true,
                area: ['60%', '70%'],
                btn: ['关闭']
            });
        }
    });
</script>